<template>
	<cl-crud ref="crud" @load="onLoad">
		<template #slot-add-role="{scope}">
			<el-button
				size="mini"
				type="primary"
				@click="addRole()"
				v-permission="$service.account.role.permission.add"
				><i class="el-icon-plus"></i>添加角色</el-button
			>
		</template>
	</cl-crud>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'role',
	components: {},
	data() {
		return {};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	created() {},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.account.role)
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60'
						},
						{
							prop: 'name',
							label: '名称',
							align: 'center',
							minWidth: 150
						},
						{
							hidden: true,
							prop: 'label',
							label: '标识',
							align: 'center',
							minWidth: 150,
							emptyText: '无'
						},
						{
							prop: 'remark',
							label: '备注',
							align: 'center',
							minWidth: 150,
							emptyText: '无'
						},
						{
							prop: 'createTime',
							label: '创建时间',
							align: 'center',
							minWidth: 150,
							sortable: true
						},
						{
							prop: 'updateTime',
							label: '更新时间',
							align: 'center',
							minWidth: 150
						}
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						width: '800px',
						labelWidth: '100px'
					},
					items: [
						{
							prop: 'name',
							label: '名称：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写名称',
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '名称不能为空'
							}
						},
						{
							hidden: true,
							prop: 'label',
							label: '标识：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写标识',
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '标识不能为空'
							}
						},
						{
							prop: 'remark',
							label: '备注：',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写备注',
									clearable: true
								},
								props: {
									type: 'textarea',
									rows: 4
								}
							}
						},
						{
							prop: 'menuIdList',
							label: '功能权限：',
							span: 12,
							component: {
								name: 'cl-role-tree',
								props: {
									placeholder: '请选择'
								}
							},
							rules: {
								required: true,
								message: '功能权限不能为空'
							}
						},
						{
							prop: 'departmentIdList',
							label: '数据权限：',
							span: 12,
							value: [],
							component: {
								name: 'cl-dept-tree'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'slot-add-role', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					let { list } = await next(params);

					list.map(e => {
						if (e.roleName) {
							this.$set(e, 'roleNameList', e.roleName.split(','));
						}

						e.status = Boolean(e.status);
					});

					if (this.userInfo.username === 'admin') {
						app.setData('table.columns[prop:label].hidden', false);
					}

					render(list);
				})
				.on('open', (isEdit, form) => {
					if (isEdit) {
						app.setData(
							'upsert.items[prop:menuIdList].component.props.value',
							form.menuIdList
						);
					}
					if (this.userInfo.username === 'admin') {
						app.setData('upsert.items[prop:label].hidden', false);
					}
				})
				.done();

			app.refresh();
		},
		// 添加角色弹窗
		addRole() {
			this.crud.add();
		}
	}
};
</script>

<style lang="stylus" scoped></style>
